<template>
	<view class="pay" v-show="showFlag">

		<!-- 顶栏 -->
		<!-- 只能有一个根元素 -->
		<u-sticky offset-top="0" bg-color="#fff">
			<view class="head"></view>
		</u-sticky>
		<!-- 卡片 -->
		<view class="main_card ">
			<view class="u-relative card0 u-padding-left-30 u-padding-top-48">
				<view class="name u-font-36 u-margin-bottom-22" style="font-weight: 550;">{{name}}</view>
				<view class="weizhi u-font-26">{{address}}</view>
			</view>
			<view style="height: 68vh;">
				<view :type="'noData'" :nextPage="!nextPage" :isTab="false" :isData="listData.length < 1" :loading="loading"
						  @onRefresh="onRefresh">
					<view v-if="this.listData.length == 0">
					  <view style="width: 232px;height: 242px;margin: 110px auto;">
					    <image style="width: 100%;height: 100%;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/xcxImage/2023-08-05/de8bed00f080ef234244740548dd040.png" mode=""></image>
					  </view>
					  <view style="width: 62%;margin: -66px auto;text-align: center;color: #999;">暂无数据</view>
					</view>
					<view class="card2" @click="navTo('/homePage1/positionDetail/positionDetail',item)" v-for="(item,index) in listData">
						<view>
							<h3>{{
                            item.parking_lot_type == 1
                            ? '产权车位'
                            :item.parking_lot_type == 2
                            ? '租赁车位'
                            :item.parking_lot_type == 3
                            ? '不固定车位'
                            :'暂无'
                            }}</h3>
						</view>
						<view>车牌号：{{item.driving_number}}</view>
						<view>缴费期数：{{item.payment_cycle}}期</view>
						<view>欠费日期：{{item.overdueTime}}</view>
						<view>车位状态：{{
                            item.parking_status == 0
                            ? '待售'
                            :item.parking_status == 1
                            ? '已售'
                            :item.parking_status == 2
                            ? '待出租'
                            :item.parking_status == 3
                            ? '已出租'
                            :'暂无'
                            }}</view>
						
						<view>
							缴费状态：<span
                                    :style=" item.driving_state == 1
                            ? 'color: #FFA500'
                            :item.driving_state == 2
                            ? 'color: blue'
                            :item.driving_state == 3
                            ? 'color: #50BB82'
                            :''"
                            >
                            {{
                            item.driving_state == 1
                            ? '待缴'
                            :item.driving_state == 2
                            ? '欠费'
                            :item.driving_state == 3
                            ? '已缴'
                            :''
                            }}
                            </span>
						</view>
						<view>车位位置：{{item.proName}}{{item.parking_lot_name}}{{item.ps_number}}</view>
						<view class="u-flex">
							<view class="u-flex-1">应缴金额：￥ <span style="color: #333;font-size: 20px;font-weight: 550;">{{item.zMoney}}</span>元</view>
							<view class="u-margin-right-30 yjq u-padding-10"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import baseApi from '../../api/api.js'
	export default {
		data() {
			return {
				count: 4,
				value: 2,
				name: '',
				address: '',
				showFlag: false,
				payList: {
					costName: '',
					costNum: 0,
					wuyeMoney: 0,
					fujiaMoney: 0,
					weiyueMoney: 0,
					allMoney: 0,
				},
				pageIndex:1,
				loading: false,
				// type: 1,
				nextPage:false,
				listData:[],
			}
		},
		async onShow() {
			this.checkLogin();
		},
		onPullDownRefresh() {
			this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
			this.checkLogin();
			this.getPositionList();
		},
		methods: {
			// 验证是否登录或实名认证
			checkLogin(){
				// this.getPayList()
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/my/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
									_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							this.getPositionList();
							this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/homePage1/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}

			},
			onRefresh() {
				if (!this.nextPage) {
					this.pageIndex = this.pageIndex + 1;
					this.getPositionList();
				}
			},
			// async getPayList() {
			// 	let res = await this.$request.api.getPayList({
			// 		// proId: this.homelist.proId,
			// 		// roomId: this.homelist.roomId,
			// 		// setId: this.homelist.setId,
			// 		proId: uni.getStorageSync('projectItem').proId,
			// 		roomId: uni.getStorageSync('projectItem').roomId,
			// 		setId: uni.getStorageSync('projectItem').setId,
			// 	})
			// 	console.log(res)
			// 	this.payList = res.data.data
			// },
			getPositionList() {
				console.log(this.pageIndex,'pageindex')
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				this.loading = false;
				this.$request.api.getMyPosition({
					appYeZhu2:1,
					pageIndex: this.pageIndex,
					room_id:this.homelist.roomId
				}).then(res => {
					console.log(res)
					if (this.pageIndex == 1) {
						this.listData = res.data.data.datalist || [];
						console.log(this.listData)
					} else {
						this.listData = [...this.listData, ...res.data.data.datalist];
					}
					console.log(this.listData)
					this.nextPage = res.data.data.isEndPage
					// this.loading = true;
					uni.hideLoading();

				})
				console.log(this.nextPage)
				uni.stopPullDownRefresh()
			},
			wuyefei() {
				uni.navigateTo({
					url: '/pages/wuyepay/wuyepay'
				});
			},
			navTo(url, item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item=' + items
				});
			},
			dianji() {
				var data = {
					access_token: '1234ABD1234ABD',
					oauth_consumer_key: '12345',
					openid: 'B08D412EEC4000FFC37CAABBDC1234CC',
					format: 'json'
				}
				baseApi.postcaty(data).then(res => {})
			}
		}
	}
</script>

<style scoped lang="scss">
	.head {
		height: 184rpx;
		// background-color: #427705;
		background: linear-gradient(to bottom, #427705, #18b566);
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.card0 {
		height: 220rpx;
		border-radius: 6px;
		box-shadow: 0px 3px 40rpx 0px rgba(0, 0, 0, 0.1);
		top: -100rpx;
		background-color: #fff;
		z-index: 99999;
	}

	.card1 {
		height: auto;
		border-radius: 6px;
		background: linear-gradient(150deg, rgba(246, 179, 82, 1) 0%, rgba(237, 165, 59, 1) 100%);
		box-shadow: 0px 3px 40rpx 0px rgba(249, 168, 50, 0.4);
		padding-top: 40rpx;
		padding-left: 40rpx;

		view {
			margin-bottom: 20rpx;
			color: #fff;
		}
	}
	.card2 {
		border-radius: 6px;
		background: #ffffff;
		box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
		margin-top: 46rpx;
		padding: 18px 20px 3px 20px;
		view {
			margin-bottom: 20rpx;
			color: #333;
		}
	}
	.car2:last-child{
		margin-bottom: 100rpx;
	}

	.main_card {
		padding: 0 30rpx;
	}

	.yjq {
		border: 1px solid #fff;
		border-radius: 6px;
		box-sizing: border-box;
	}
</style>
